<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>好友/群资料</title>
<link rel="stylesheet" href="../../../layui.css">
<link rel="stylesheet" href="../../../layui.demo.css">
<style type="text/css">
.layim-msgbox{margin: 15px;}
.layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 110px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;width: 200px;}
.layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
.layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
.layim-msgbox li p span{padding-left: 5px; color: #999;}
.layim-msgbox li p em{font-style: normal; color: #FF5722;}
.layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
.layim-msgbox-user{padding-top: 5px;}
.layim-msgbox-content{margin-top: 3px;}
.layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
.layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
.pt15{padding-top: 15px;}
.pt10{padding-top: 10px;}
.pt30{padding-top: 30px;}
.pd0{padding: 0px;}
.chat{
    float: right;
    margin-top: -45px;  
    margin-right: -110px;
    z-index: 999999;
}
.label{    
    float: left;
    display: block;
    padding: 9px 5px 9px 20px;
    width: 40px;
    font-weight: 400;
    text-align: right;
  }
.label_key{    
    float: left;
    display: block;
    padding: 9px 5px;
    font-weight: 400;
  }
.block {
    margin-left: 55px;
    min-height: 36px;
}
.layui-input, .layui-textarea {
    display: block;
    width: 90%;
    padding-left: 10px;
}
.noresize{
  resize:none;
}
.select{
    height: 38px;
    line-height: 38px;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    border-radius: 2px;
}
</style>
</head>
<body>	    
<div class="layui-form" id="LAY_view">
      
</div>

<script type="text/html" title="资料模版" id="LAY_tpl" style="display:none;">
{{# if(d.data.type == 'friend'){ }}
  {{# if(d.mine == d.data.memberIdx){ }}
    <form class="layui-form" action="">
      <div class="layui-col-xs12 pt15">
        <div class="layui-col-xs6 ">
          <label class="label">昵&nbsp;&nbsp;称</label>
          <div class="block">
            <input type="text" class="layui-input" name="memberName" id="memberName" lay-verify="required" autocomplete="off" value="{{d.data.memberName}}">
          </div>
        </div>        
        <div class="layui-col-xs6">
          <label class="label">性&nbsp;&nbsp;别</label>
          <div class="block">
            <select name="memberSex" class="select" style="display: block;">
              <option value="">请选择性别</option>
              <option value="1" {{# if(d.data.memberSex == '1'){ }} selected="selected" {{# } }}>男</option>
              <option value="2" {{# if(d.data.memberSex == '2'){ }} selected="selected" {{# } }}>女</option>
              <option value="3" {{# if(d.data.memberSex == '3'){ }} selected="selected" {{# } }}>保密</option>
            </select>            
          </div>
        </div> 
      </div>
      <div class="layui-col-xs12 pt15">
        <div class="layui-col-xs6 ">
          <label class="label">生&nbsp;&nbsp;日</label>
          <div class="block">
            <input type="text" class="layui-input" name="birthday" id="birthday" value="{{ d.data.birthday}}">
          </div>
        </div>        
        <div class="layui-col-xs6">
          <label class="label">血&nbsp;&nbsp;型</label>
          <div class="block">
            <select name="blood_type" class="select" style="display: block;">
              <option value="">请选择血型</option>
              <option value="A型" {{# if(d.data.blood_type == 'A型'){ }} selected="selected" {{# } }}>A型</option>
              <option value="B型" {{# if(d.data.blood_type == 'B型'){ }} selected="selected" {{# } }}>B型</option>
              <option value="AB型" {{# if(d.data.blood_type == 'AB型'){ }} selected="selected" {{# } }}>AB型</option>
              <option value="O型" {{# if(d.data.blood_type == 'O型'){ }} selected="selected" {{# } }}>O型</option>
              <option value="其他血型" {{# if(d.data.blood_type == '其他血型'){ }} selected="selected" {{# } }}>其他血型</option>
            </select>            
          </div>
        </div> 
      </div>      
      <div class="layui-col-xs11 pt15">
          <label class="label">职&nbsp;&nbsp;业</label>
          <div class="block">
            <select name="job" class="select" style="display: block;">
              <option value="">请选择职业</option>
              <option value="1" {{# if(d.data.job == '1'){ }} selected="selected" {{# } }}>计算机/互联网/通信</option>  
              <option value="2" {{# if(d.data.job == '2'){ }} selected="selected" {{# } }}>生产/工艺/制造</option>
              <option value="3" {{# if(d.data.job == '3'){ }} selected="selected" {{# } }}>医疗/护理/制药</option>
              <option value="4" {{# if(d.data.job == '4'){ }} selected="selected" {{# } }}>金融/银行/投资/保险</option>
              <option value="5" {{# if(d.data.job == '5'){ }} selected="selected" {{# } }}>商业/服务业/个体经营</option>
              <option value="6" {{# if(d.data.job == '6'){ }} selected="selected" {{# } }}>文化/广告/传媒</option>
              <option value="7" {{# if(d.data.job == '7'){ }} selected="selected" {{# } }}>娱乐/艺术/表演</option>
              <option value="8" {{# if(d.data.job == '8'){ }} selected="selected" {{# } }}>律师/法务</option>               
              <option value="9" {{# if(d.data.job == '9'){ }} selected="selected" {{# } }}>教育/培训</option>               
              <option value="10" {{# if(d.data.job == '10'){ }} selected="selected" {{# } }}>公务员/行政/事业单位</option>
              <option value="11" {{# if(d.data.job == '11'){ }} selected="selected" {{# } }}>模特</option>
              <option value="12" {{# if(d.data.job == '12'){ }} selected="selected" {{# } }}>空姐</option>
              <option value="13" {{# if(d.data.job == '13'){ }} selected="selected" {{# } }}>学生</option>
              <option value="14" {{# if(d.data.job == '14'){ }} selected="selected" {{# } }}>其他</option>
            </select>      
          </div>
      </div>
      <div class="layui-col-xs12 pt15">
          <label class="label">Q&nbsp;&nbsp;&nbsp;&nbsp;Q</label>
          <div class="block">
            <input type="text" class="layui-input" name="qq" id="qq" value="{{d.data.qq}}" >
          </div>
      </div>        
      <div class="layui-col-xs12 pt15">
          <label class="label">微&nbsp;&nbsp;信</label>
          <div class="block">
            <input type="text" class="layui-input" name="wechat" id="wechat" value="{{d.data.wechat}}">
          </div>
      </div>   
      <div class="layui-col-xs12 pt15">
          <label class="label">手&nbsp;&nbsp;机</label>
          <div class="block">
            <input type="text" class="layui-input" name="phoneNumber" id="phoneNumber" value="{{d.data.phoneNumber}}">
          </div>
      </div> 
      <div class="layui-col-xs12 pt15">
          <label class="label">邮&nbsp;&nbsp;箱</label>
          <div class="block">
            <input type="text" class="layui-input" name="emailAddress" id="emailAddress" value="{{d.data.emailAddress}}">
          </div>
      </div>                
      <div class="layui-col-xs12 pt15">
          <label class="label">签&nbsp;&nbsp;名</label>
          <div class="block">
            <textarea name="signature" placeholder="请输入内容" class="layui-textarea noresize">{{d.data.signature}}</textarea>
          </div>
      </div>   
      <div class="layui-form-item pt30">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="*">保存</button>
          <button type="button" id="close" class="layui-btn layui-btn-primary">关闭</button>
        </div>
      </div> 
    </form>  
  {{# }else{ }}   
      <div class="layui-form-item pt15">
        <div class="layim-msgbox">
          <li>
          <a href="javascript:void(0);" target="_blank">
            <img src="../../../../../../uploads/person/{{ d.data.memberIdx }}.jpg" class="layui-circle layim-msgbox-avatar" >
          </a>
          <p class="layim-msgbox-user">
            <span style="letter-spacing: 5px;">昵 称</span> {{ d.data.memberName||'' }}
          </p>    
          <p class="layim-msgbox-user">
            <span>会员号</span> {{ d.data.memberIdx||'' }}
          </p>    <button class="layui-btn layui-btn layui-btn-primary chat" data-name="{{ d.data.memberName }}" data-chattype="friend" data-type="chat" data-uid="{{d.data.memberIdx}}">发送消息</button>                 
          </li>   
        </div>
            
      </div>
      <div class="layui-col-xs12 pt10">
          <label class="label">性&nbsp;&nbsp;别</label>
          <div class="block">
            <label class="label_key">
               {{# if(d.data.memberSex == '1'){ }} 男 {{# } }}
               {{# if(d.data.memberSex == '2'){ }} 女 {{# } }}
               {{# if(d.data.memberSex == '3'){ }} 保密 {{# } }}
            </label>
          </div>
      </div>               
      <div class="layui-col-xs12 pt10">
        <div class="layui-col-xs6 ">
          <label class="label">生&nbsp;&nbsp;日</label>
          <div class="block">
            <div class="label_key">{{d.data.birthday}}</div>
          </div>
        </div>        
        <div class="layui-col-xs6">
          <label class="label">血&nbsp;&nbsp;型</label>
          <div class="block">
            <label class="label_key">
               {{# if(d.data.blood_type == 'A型'){ }} A型 {{# } }}
               {{# if(d.data.blood_type == 'B型'){ }} B型 {{# } }}
               {{# if(d.data.blood_type == 'AB型'){ }} AB型 {{# } }}
               {{# if(d.data.blood_type == 'O型'){ }} O型 {{# } }}
               {{# if(d.data.blood_type == '其他血型'){ }} 其他血型 {{# } }}
            </label>           
          </div>
        </div> 
      </div>      
      <div class="layui-col-xs11 pt10">
          <label class="label">职&nbsp;&nbsp;业</label>
          <div class="block">
            <label class="label_key">
               {{# if(d.data.jobs == '1'){ }} 计算机/互联网/通信 {{# } }}
               {{# if(d.data.jobs == '2'){ }} 生产/工艺/制造 {{# } }}
               {{# if(d.data.jobs == '3'){ }} 医疗/护理/制药 {{# } }}
               {{# if(d.data.jobs == '4'){ }} 金融/银行/投资/保险 {{# } }}
               {{# if(d.data.jobs == '5'){ }} 商业/服务业/个体经营 {{# } }}
               {{# if(d.data.jobs == '6'){ }} 文化/广告/传媒 {{# } }}
               {{# if(d.data.jobs == '7'){ }} 娱乐/艺术/表演 {{# } }}
               {{# if(d.data.jobs == '8'){ }} 律师/法务 {{# } }}
               {{# if(d.data.jobs == '9'){ }} 教育/培训 {{# } }}
               {{# if(d.data.jobs == '10'){ }} 公务员/行政/事业单位 {{# } }}
               {{# if(d.data.jobs == '11'){ }} 模特 {{# } }}
               {{# if(d.data.jobs == '12'){ }} 空姐 {{# } }}
               {{# if(d.data.jobs == '13'){ }} 学生 {{# } }}
               {{# if(d.data.jobs == '14'){ }} 其他 {{# } }}
            </label>              
          </div>
      </div>
      <div class="layui-col-xs12 pt10">
          <label class="label">Q&nbsp;&nbsp;&nbsp;&nbsp;Q</label>
          <div class="block">
            <div class="label_key">{{d.data.qq || []}}</div>
          </div>
      </div>        
      <div class="layui-col-xs12 pt10">
          <label class="label">微&nbsp;&nbsp;信</label>
          <div class="block">
            <div class="label_key">{{d.data.wechat || []}}</div>
          </div>
      </div>   
      <div class="layui-col-xs12 pt10">
          <label class="label">手&nbsp;&nbsp;机</label>
          <div class="block">
            <div class="label_key">{{d.data.phoneNumber || []}}</div>
          </div>
      </div> 
      <div class="layui-col-xs12 pt10">
          <label class="label">邮&nbsp;&nbsp;箱</label>
          <div class="block">
            <div class="label_key">{{d.data.emailAddress || []}}</div>
          </div>
      </div>                
      <div class="layui-col-xs12 pt10">
          <label class="label">签&nbsp;&nbsp;名</label>
          <div class="block">
            <div class="label_key">{{d.data.signature|| []}}</div>
          </div>
      </div>       
  {{# } }}    
{{# } }}
</script>  
</body>
<script src="../../../../layui.js"></script>
<script>
layui.use(['form','laydate'], function(){
  var form = layui.form
  ,laydate = layui.laydate;
  layui.use(['laydate','form','laytpl'], function(){
    var layim = layui.layim
    , layer = layui.layer
    ,laytpl = layui.laytpl
    ,$ = layui.jquery;
    
    param =  location.search;//获得URL参数。该窗口url会携带会话id和type
    var cache = parent.layui.layim.cache();  
    var url = '../../../../../../'+cache.base.getInformation.url || {};  //获得URL参数。
    $.get(url+'&'+param, {}, function(data){
      var res = eval('(' + data + ')');
      if(res.code != 0){
          return layer.msg(res.msg);
      } 
      var html = laytpl(LAY_tpl.innerHTML).render({
        data: res.data,
        mine: cache.mine.id
      });
      $('#LAY_view').html(html);
      laydate.render({ 
        elem: '#birthday'
        ,format: 'yyyy年MM月dd日' //可任意组合
      });  
      $('body').on('click', '.chat', function () {
          var othis = $(this), type = othis.data('type');
          chat.call(this, othis);
      });    
      form.on('submit(*)', function(submitData){
        var save_url = '../../../../../../'+cache.base.saveMyInformation.url || {};  //获得URL参数。
        var key_value = submitData.field;
        $.post(save_url, {key_value}, function(resp){
          var res = eval('(' + resp + ')');
          if(res.code != 0){
              layer.msg('保存成功!', {icon: 1,time: 1000}); 
          }else{
            layer.msg('保存成功!', {icon: 1,time: 1000}); 
              var index = parent.layer.getFrameIndex(window.name); 
              parent.layer.close(index);
          }
        });       
      });
              
      function chat(othis){//发起好友聊天
        var  uid = othis.data('uid'), avatar = "./uploads/person/"+uid+'.jpg';            
        parent.layui.layim.chat({
            name: othis.data('name')
            ,type: othis.data('chattype')
            ,avatar: avatar
            ,id: uid
        });
      }        

      $("#close").click(function(){
        var index = parent.layer.getFrameIndex(window.name); 
        parent.layer.close(index);
      });      
    });

  });
}); 

</script>
</html>
